<template>
  <div class="father">
    <scrollView @onReachBottom="scrollEnd">
      <div class="center" ref="container">
        <div class="head">
          <div class="titleBox">在线问诊</div>
          <div class="selectBox" @click="router.push('/search')">
            <comIcon style="font-size: 18px;vertical-align: middle;" name="icons-搜索" />
            搜一搜：疾病/症状/医生/健康知识
          </div>

        </div>
        <div class="nav1">
          <div class="son" @click="router.push('/findDoctor')">
            <div class="icon">
              <comIcon name="icons-home-doctor" />
            </div>
            <p>问医生</p>
            <span>按科室查问医生</span>
          </div>
          <div class="son" @click="router.push('/fastConsult')">
            <div class="icon">
              <comIcon name="icons-home-prescribe" />
            </div>
            <p>图文问诊</p>
            <span>20s医生极速回复</span>
          </div>
          <div class="son" @click="router.push('/medicineConsult')">
            <div class="icon">
              <comIcon name="icons-home-graphic" />
            </div>
            <p>开药问诊</p>
            <span>线上买药更方便</span>
          </div>

        </div>
        <div class="nav2">
          <div class="son" @click="router.push('/medicineOrder')">
            <div class="icon">
              <comIcon name="icons-home-order" />
            </div>
            <p>药品订单</p>
          </div>
          <div class="son" @click="router.push('/choosePatient')">
            <div class="icon">
              <comIcon style="font-size: 32px;" name="icons-home-docs" />
            </div>
            <p>健康档案</p>
          </div>
          <div class="son" @click="router.push('/prescriptionList')">
            <div class="icon">
              <comIcon name="icons-home-rp" />
            </div>
            <p>我的处方</p>
          </div>
          <div class="son" @click="router.push('/illnessSearch')">
            <div class="icon">
              <comIcon style="font-size: 32px;" name="icons-home-find" />
            </div>
            <p>疾病查询</p>
          </div>

        </div>
        <div class="banner">
          <img src="https://youyi.itheima.net/static/coupon-banner.f12cfc42.png" alt="">
        </div>
        <div class="tab">
          <div @click="recommend(1)" :class="num == 1 ? 'div1' : ''">关注 <span></span></div>
          <div @click="recommend(2)" :class="num == 2 ? 'div1' : ''">推荐 <span></span></div>
          <div @click="recommend(3)" :class="num == 3 ? 'div1' : ''">减脂</div>
          <div @click="recommend(4)" :class="num == 4 ? 'div1' : ''">饮食</div>
        </div>

        <div class="tabBox">

          <div class="concern" v-if="num == 1">
            <div class="concernList">
              推荐关注 <span class="more" @click="goRecommendFollow">查看更多 <van-icon name="arrow" /></span>
            </div>
            <div class="concernList2">
              <div class="content" v-for="item in attention?.rows">
                <div class="imgBox">
                  <img :src="item.avatar" alt="">
                </div>
                <p style="margin: 0;padding: 0;margin-top: 10px;color: black;">{{ item.name }}</p>
                <div class="textbox">
                  <span>{{ item.hospitalName }}{{ item.major }} {{ item.positionalTitles
                    }}</span>
                </div>
                <button class="buttonBox" @click="onLike(item)" v-if="item.likeFlag == 0">+关注</button>
                <button class="buttonBox" @click="onLike1(item)" v-if="item.likeFlag == 1">已关注</button>
              </div>


            </div>
          </div>


          <div v-if="num == 1" class="adm-infinite-scroll">没有更多了{{ current }}</div>



          <homeList :list="arr2" v-if="num == 2" />
           <p v-if="recommendFlag==false && num == 2">加载中...</p>
          <homeList :list="arr3" v-if="num == 3" />
          <p v-if="recommendFlag1==false && num == 3">加载中...</p>
          <homeList :list="arr4" v-if="num == 4" />
          <p v-if="recommendFlag2==false && num == 4">加载中...</p>
        </div>

      </div>
    </scrollView>

    <div>
      <tabber />
    </div>
  </div>
</template>

<script setup lang="ts">
import comIcon from '../components/common/com-icon/com-icon.vue'
import tabber from '../components/common/com-tabbar/com-tabbar.vue'
import homeList from '@/components/common/com-homeList/com-homeList.vue'
import { getHomeKnowledgeAPI, getHomePageDocAPI, getLikeAPI } from '@/api/home'
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { patient, PageDoc, PageDocs } from '@/types/home'

import scrollView from '@/components/common/com-scrollView/com-scrollView.vue'
const num = ref(1)
const arr2 = ref<rowss[]>([])
const arr3 = ref<rowss[]>([])
const arr4 = ref<rowss[]>([])

let attention = ref<PageDoc>()


import upLoading from '../hooks/use-upLoading.js'
import type { rowss } from '@/types/types'
import { showToast } from 'vant'
const { handleScroll, current } = upLoading()
const container = ref()
onMounted(async () => {
  let red = await getHomePageDocAPI(1, 5)
  attention.value! = red.data.data
  handleScroll(container.value)

})


// 控制接口请求开关
let recommendFlag = ref(false)
let recommendFlag1 = ref(false)
let recommendFlag2 = ref(false)
// 控制接口请求页数
let recommendPage = ref(1)
let recommendPage1 = ref(1)
let recommendPage2 = ref(1)

// 关注列表控制请求
const follow = ref<boolean>(false)
const follow1 = ref<boolean>(false)
const follow2 = ref<boolean>(false)

// tab切换
const recommend = async (val: number) => {
  num.value = val
  if (num.value == 2 && !recommendFlag.value) {
    let res = await getHomeKnowledgeAPI('recommend', recommendPage.value, 10)
    arr2.value = res.data.data.rows
    recommendFlag.value = true

    if (res.data.data.rows.length < recommendPage.value) {
      follow.value = true
    }
  }
  if (num.value == 3 && !recommendFlag1.value) {
    let res = await getHomeKnowledgeAPI('fatReduction', recommendPage1.value, 10)
    arr3.value = res.data.data.rows
    recommendFlag1.value = true
    if (res.data.data.rows.length < recommendPage.value) {
      follow1.value = true
    }
  }
  if (num.value == 4 && !recommendFlag2.value) {
    let res = await getHomeKnowledgeAPI('food', recommendPage2.value, 10)
    arr4.value = res.data.data.rows
    recommendFlag2.value = true
    if (res.data.data.rows.length < recommendPage.value) {
      follow2.value = true
    }
  }

}

const router = useRouter()
// 点击查看更多去推荐关注
const goRecommendFollow = () => {
  router.push('/recommendFollow')
}


const scrollEnd = async () => {
  if (num.value == 2) {
    if (follow.value) return
    recommendPage.value++
    let res = await getHomeKnowledgeAPI('recommend', recommendPage.value, 10)
    arr2.value.push(...res.data.data.rows)
    recommendFlag.value = true
  }
  if (num.value == 3) {
    if (follow1.value) return
    recommendPage1.value++
    let res = await getHomeKnowledgeAPI('fatReduction', recommendPage1.value, 10)
    arr3.value.push(...res.data.data.rows)
    recommendFlag1.value = true
  }
  if (num.value == 4) {
    if (follow2.value) return
    recommendPage2.value++
    let res = await getHomeKnowledgeAPI('food', recommendPage2.value, 10)
    arr4.value.push(...res.data.data.rows)
    recommendFlag2.value = true
  }

}




function onLike(item: any) {
  item.likeFlag = 1
  const res = getLikeAPI('doc', item.id)
  showToast('关注成功');
}

function onLike1(item: any) {
  item.likeFlag = 0
  const res = getLikeAPI('doc', item.id)
  showToast('取消关注成功');
}


</script>

<style lang="scss" scoped>
.father {
  width: 100%;
  height: 100vh;
  display: flex;
}

.center {
  width: 100%;
  height: 93%;
  background-color: rgb(255, 255, 255);
  overflow: auto;

  .head {
    position: relative;
    width: 100%;
    height: 100px;
    background-color: #44BDAF;
    border-radius: 0 0 50% 50%;

    .titleBox {
      width: 90%;
      height: 50px;
      line-height: 70px;
      margin: auto;
      font-size: 22px;
      color: #fff;
    }

    .selectBox {
      position: absolute;
      background-color: #FFFFFF;
      left: 5%;
      top: 65px;
      width: 90%;
      height: 40px;
      line-height: 40px;
      border-radius: 50px;
      text-indent: 8px;
      font-size: 16px;
      color: #B1B1B1;
      border: 2px solid #F5F5F5;
    }

  }

  .nav1 {
    width: 80%;
    height: 120px;
    margin: auto;
    display: flex;
    margin-top: 10px;

    .son {
      flex: 1;
      text-align: center;
      line-height: 7px;

      .icon {
        width: 100%;
        height: 60px;
        line-height: 80px;
        text-align: center;
        font-size: 36px;
      }

      span {
        font-size: 12px;
        color: #848484;
      }
    }
  }

  .nav2 {
    width: 90%;
    height: 90px;
    margin: auto;
    display: flex;

    .son {
      flex: 1;
      text-align: center;
      line-height: 7px;

      .icon {
        width: 100%;
        height: 50px;
        line-height: 60px;
        font-size: 22px;
      }
    }
  }

  .banner {
    width: 90%;
    height: 105px;
    margin: auto;

    img {
      width: 100%;
      height: 100%;
      border-radius: 20px;
    }
  }

  .tab {
    width: 100%;
    height: 50px;
    line-height: 50px;

    div {
      width: 60px;
      text-align: center;
      display: inline-block;
      position: relative;

    }

    .div1 {
      width: 60px;
      font-weight: 700;
      text-align: center;
      display: inline-block;
      position: relative;

    }

    .div1:after {
      content: "";
      position: absolute;
      left: 25%;
      bottom: 0;
      width: 50%;
      height: .07333rem;
      background: #16C2A3;
      border-radius: .05333rem;
    }
  }

  .tabBox {
    width: 100%;


    .concern {
      width: 100%;
      background-color: #F6F7F9;
      padding-bottom: 20px;
    }

    .concernList {
      width: 95%;
      height: 30px;
      padding: 10px;
      line-height: 30px;

      .more {
        float: right;
        color: #C5C5C7;
      }
    }

    .concernList2::-webkit-scrollbar {
      display: none;
    }

    .concernList2 {
      width: 100%;
      height: 200px;
      overflow-y: hidden;
      overflow-y: auto;
      white-space: nowrap;

      .content {
        width: 133px;
        height: 200px;
        margin-left: 15px;
        background-color: #FFFFFF;
        color: #fff;
        display: inline-block;
        border-radius: 20px;
        text-align: center;

        .imgBox {
          width: 100%;
          height: 60px;
          padding-top: 20px;
          text-align: center;

          img {
            width: 58px;
            height: 58px;
            border-radius: 50%;
          }
        }

        .textbox {
          width: 90%;
          height: 33px;
          padding: 0 5px 0 5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          text-overflow: ellipsis;
          overflow: hidden;
          margin-top: 5px;
          color: #C8C8C9;
          font-size: 12px;
          white-space: pre-wrap;
        }

        .buttonBox {
          padding: 4px 15px 4px 15px;
          border-radius: 25px;
          border: none;
          margin-top: 13px;
          background-color: #16C2A3;
          font-size: 12px;
        }

      }

    }

  }
}

.adm-infinite-scroll {
  color: #A2A2A2;
  background-color: #FFFFFF;
  padding: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
}
</style>
